<template>
<div class="headerInfo">
  <h1>title</h1>
      <ul class="nav">
        <li>
          <span>no.1</span>
        </li>
        <li>
          <el-dropdown trigger="click" @command="handleCommandLanguage">
            <span class="el-dropdown-link">
              Language
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="zh">简体中文</el-dropdown-item>
              <el-dropdown-item command="en">English</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
        <li>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              {{$t('test.name')}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
              <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
        <li>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              hds
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
              <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
      </ul>
      </div>
</template>

<script>
export default {
  methods:{
      handleCommandLanguage(command) {
        if (command == 'zh') {
          localStorage.setItem('locale', 'zh')
          this.$i18n.locale = localStorage.getItem('locale')
        } else if (command == 'en') {
          localStorage.setItem('locale', 'en')
          this.$i18n.locale = localStorage.getItem('locale')
        }
      },
  }
}
</script>
<style lang="scss">
    .headerInfo {
      h1 {
        float: left;
        padding: 10px 15px;
        line-height: 40px;
      }
      .nav {
        float: right;
        list-style: none;
        @media (min-width: 768px) {
          li {
            float: left;
          }
        }
        li {
          position: relative;
          display: block;
          :focus{background-color:#E7E7E7;}
          span {
            display: block;
            padding: 10px 15px;
            line-height: 40px;
          }
        }
      }
    }
</style>

